<template>
	<view class="">
		<u-sticky>
			<u-tabs :list="tabList" activeStyle="font-weight:bold;color:#000000;"
				inactiveStyle="color:#9C9C9C;font-weight:nomal;" lineHeight="3px" lineWidth="20px"
				@change="tabsChange"></u-tabs>
		</u-sticky>
		<view class="container" v-for="(item,index) of data" :key="index">
			<u-divider :hairline="true" v-if="index % 2 == 1"></u-divider>
			<commentItemComponent :info="item"></commentItemComponent>
			
		</view>
	</view>
</template>

<script>
	import {
		getCommentPageByTask
	} from "@/api/comment.js"
	import commentItemComponent from "@/components/commentItemComponent/index.vue"
	
	export default {
		components: {
			commentItemComponent
		},
		data(){
			return {
				tabList: [{
					name: '全部',
					type: ''
				}, {
					name: '有图',
					type: '1'
				}],
				has_file: '',
				page: {
					page_size: 7,
					page_number: 1,
					total: 0
				},
				data: [],
				status: "loadmore",
				task_id: ''
			}
		},
		onLoad(e) {
			const {task_id} = e
			if(task_id){
				this.task_id = task_id
				this.page = {
					page_size: 7,
					page_number: 1,
					total: 0
				}
				this.data = []
				this.status = 'loadmore'
				this.getData()
			}
			
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			tabsChange(e) {
				this.has_file = e.type
				this.page = {
					page_size: 7,
					page_number: 1,
					total: 0
				}
				this.data = []
				this.status = 'loadmore'
				this.getData()
			},
			getData() {
				if (this.status != "nomore") {
					this.status = "loading"
				} else {
					return
				}
				getCommentPageByTask({
						...this.page,
						has_file: this.has_file,
						task_id: this.task_id
					})
					.then(res => {
						const data = (res.list || []).map(item => {
							try{
								item.file = JSON.parse(item.file)
							}catch(e){
								item.file = []
							}
							return item
						})
						this.page.total = res.total
						this.data.push(...data)
						if (this.data.length == res.total) {
							this.status = "nomore"
						} else {
							this.page.page_number += 1
							this.status = "loadmore"
						}
					})
					.catch(e => {
						this.status = "loadmore"
					})
			}
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
	}
</style>
<style scoped lang="scss">
	.container{
		margin: 20rpx auto;
		width: 729rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 6rpx;
	}
</style>